<template>
  <div class="block-browser">
    <SysBrowser
      v-model="internalValue"
      :columns="blockColumns"
      :search-fields="blockSearchFields"
      :api="realGetBlockByGroup"
      title="部门"
      placeholder="请选择部门"
      row-key="aid"
      label-field="aname"
      value-key="aid"
      :display-label.sync="internalDisplayLabel"
      :multiple="multiple"
      :disabled="disabled"
      @change="handleChange"
      :queryDistrictId="queryDistrictId"
    />
  </div>
</template>

<script>
import SysBrowser from "./index.vue";
import { deptPageInfo } from "@/api/industry.js";

export default {
  name: "BlockBrowser",
  components: {
    SysBrowser,
  },
  props: {
    // v-model绑定的所ID
    value: {
      type: [String, Number],
      default: "",
    },
    // 显示的所名称
    displayLabel: {
      type: String,
      default: "",
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    queryDistrictId: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      // 真实API函数
      realGetBlockByGroup: deptPageInfo,

      // 表格列配置
      blockColumns: [
        { prop: "aid", label: "部门id", width: 150 },
        { prop: "aname", label: "部门名称" },
        { prop: "asn", label: "部门编码" },
      ],
      // 搜索字段配置
      blockSearchFields: [
        { prop: "keywords", label: "部门名称", type: "input" },
      ],
    };
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    internalDisplayLabel: {
      get() {
        return this.displayLabel;
      },
      set(val) {
        this.$emit("update:display-label", val);
      },
    },
  },
  methods: {
    // 处理选择变化
    handleChange(data) {
      this.$emit("change", data);
    },
  },
};
</script>

<style scoped>
.block-browser {
  width: 100%;
}
</style>
